<template>
  <div ref="boxwrap" class="ParamsStatus-Second">
    <div class="time-pick">
      <span>选择月份 </span>
      <el-date-picker
        v-model="month"
        type="month"
        placeholder="选择月份"
      />
    </div>
    <div class="main-content">

      <div class="box-wrap">
        <div class="title">温度分析： 超标次数分布</div>
        <div class="pie-wrap">
          <pie v-for="(item, index) in pieList" :id="'TempPie'+index" :key="index" height="100%" width="33%" :title="item" />
        </div>
        <div class="line-wrap">
          <line-chart id="line1" height="100%" width="100%" />
        </div>
      </div>

      <div class="box-wrap">
        <div class="title">压力分析： 超标次数分布</div>
        <div class="pie-wrap">
          <pie v-for="(item, index) in pieList" :id="'PressPie'+index" :key="index" height="100%" width="33%" :title="item" />
        </div>
        <div class="line-wrap">
          <line-chart id="line2" height="100%" width="100%" />
        </div>
      </div>

      <div class="box-wrap">
        <div class="title">流量分析： 超标次数分布</div>
        <div class="pie-wrap">
          <pie v-for="(item, index) in pieList" :id="'FlowPie'+index" :key="index" height="100%" width="33%" :title="item" />
        </div>
        <div class="line-wrap">
          <line-chart id="line3" height="100%" width="100%" />
        </div>
      </div>

      <div class="box-wrap">
        <div class="title">电导率分析： 超标次数分布</div>
        <div class="pie-wrap">
          <pie v-for="(item, index) in pieList" :id="'ConductivePie'+index" :key="index" height="100%" width="33%" :title="item" />
        </div>
        <div class="line-wrap">
          <line-chart id="line4" height="100%" width="100%" />
        </div>
      </div>

      <div class="box-wrap">
        <div class="title">电流分析： 超标次数分布</div>
        <div class="pie-wrap">
          <pie v-for="(item, index) in pieList" :id="'ElectricPie'+index" :key="index" height="100%" width="33%" :title="item" />
        </div>
        <div class="line-wrap">
          <line-chart id="line5" height="100%" width="100%" />
        </div>
      </div>

      <div class="box-wrap">
        <div class="title1">速度变动次数趋势</div>
        <div class="last-line-wrap">
          <line-chart id="line6" height="100%" width="100%" />
        </div>
        <div ref="tablewrap" class="detail-table">
          <div v-for="(item, index) in tableDataList" :key="index" class="table-wrap">
            <el-table :data="item.data" size="medium" border :height="tableHeight" style="width: 100%">
              <el-table-column prop="lineName" label="名称/日期" min-width="100px" />
              <el-table-column prop="7/1" label="7/1" />
              <el-table-column prop="7/2" label="7/2" />
              <el-table-column prop="7/3" label="7/3" />
              <el-table-column prop="7/4" label="7/4" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pie from './charts/params/Pie'
import LineChart from './charts/params/Line'

export default {
  name: 'ParamsStatusSecond',
  components: { Pie, LineChart },
  data() {
    return {
      month: '2021-08',
      pieList: ['A', 'B', 'C'],
      tableHeight: 'auto',
      tableDataList: [],
      lines: ['A线', 'B线']
    }
  },
  mounted() {
    this.getDomStyle()
  },
  created() {
    this.getTableData()
  },
  methods: {
    getDomStyle() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        that.tableHeight = (dom.clientHeight / 2 - 60) * 0.3
      })
    },
    getTableData() {
      this.lines.forEach(item => {
        this.tableDataList.push({
          data: [{
            lineName: item,
            '7/1': '',
            '7/2': '',
            '7/3': '',
            '7/4': ''
          }, {
            lineName: item,
            '7/1': '',
            '7/2': '',
            '7/3': '',
            '7/4': ''
          }, {
            lineName: item,
            '7/1': '',
            '7/2': '',
            '7/3': '',
            '7/4': ''
          }]
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 120px;
}
.ParamsStatus-Second{
    width: 100%;
    height: 100%;

    .time-pick{
      margin-bottom: 5px;
    }
    .main-content{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: calc(100% - 46px);
      .box-wrap{
        width: calc(100% / 3);
        height: 50%;
        .title{
          text-align: center;
          margin-top: 5px;
        }
        .title1{
          text-align: center;
        }

          &:nth-child(2),
          &:nth-child(5){
            border-left: 1px solid #5967a4;
            border-right: 1px solid #5967a4;
          }
          &:nth-last-child( -n + 3){
            border-top: 1px solid #5967a4;
          }
          &:last-child {
            padding: 10px 10px 0;
          }

          .pie-wrap, .line-wrap{
            height: calc((100% - 30px) / 2);
          }
          .last-line-wrap{
            height: calc((100% - 25px) * 0.4);
            margin-bottom: 5px;
          }
          .detail-table{
            height: calc((100% - 25px) * 0.6);
            overflow: auto;
          }
          .pie-wrap{
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            display: flex;
            flex-wrap: nowrap;

            > div {
                  flex: none;
            }
          }

      }
    }
}
</style>
